<template>
<!--  <img class="video" :="getVideo">-->
  <div>

  <el-dialog
      title="添加摄像头信息"
      :visible.sync="addFlag"
      width="40%">
    <AddCamera></AddCamera>
  </el-dialog>

  <el-row>
    <el-col span="14">
<!--     <img class="video" src="http://quwn8qjnc.hb-bkt.clouddn.com/Fj1VHDbrXQPuxkaeqcgsmf00XoPo" style="margin-top: 10px;margin-left:20px;width: 800px;height: 600px">-->
      <img class="video" :src="getVideo" style="margin-top: 10px;margin-left:20px;width: 800px;height: 600px">
    </el-col>
    <el-col span="10">
      <el-button @click="addCamera()" type="success" icon="el-icon-video-camera-solid" style="margin-top: 10px;margin-left: 220px">添加摄像头</el-button>

      <el-row style="margin-left: 20px">
        <el-col :span="6" v-for="(camera, index) in cameraList" :key="camera.id" :offset="index%3 === 0 ? 2 : 1">
          <el-card style="margin-top: 20px" class="shopCard" :title="camera.ip">
            <div v-on:click="toCamera(camera.ip,camera.port,camera.type)">
              <img src="http://quwn8qjnc.hb-bkt.clouddn.com/camera.png" alt="摄像头" width="100%" class="image">
              <div style="padding: 0px;">
                <span style="font-size: 12px">{{ camera.ip }}</span>
                <div class="bottom">
                  <div class="shopKind" style="height: 1em"> Port: {{ camera.port }}</div>
                  <div class="shopKind" style="height: 1em"> {{ camera.type }}</div>
                  <div class="shopKind" style="height: 1em"> {{ camera.name }}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-col>
  </el-row>
  </div>
</template>

<script>
import AddCamera from "@/components/AddCamera";

export default {
  name: "CameraManagement",
  components:{AddCamera},
  data(){
    return{
      cameraList:[],
      addFlag:false,
      ip:"",
      port:"",
      type:""
    }
  },
  created() {
    if (this.$route.params.isReload == 'true') {
      this.$router.go(0);
    }
    this.getCameraList();
    this.getCameraInfo();
  },
  computed:{
    getVideo:function(){
      return ("http://192.168.0.110:5000/video_viewer_new?ip="+this.ip+"&port="+this.port+"&type="+this.type)
    }
  },
  methods:{
    addCamera: function(){
      this.addFlag = true;
    },
    getCameraList: function(){
      const _this = this;
      let formData = new FormData;
      this.$axios.post('/getCamera', formData, {
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        },
        withCredentials: true
      }).then(function (response) {
        // 这里是处理正确的回调
        _this.cameraList = response.data.data;
      }).catch(function (response) {
        // 这里是处理错误的回调
        console.log(response)
      })
    },
    toCamera:function(ip,port,type){
      localStorage.setItem('IP',ip);
      localStorage.setItem('PORT',port);
      localStorage.setItem('TYPE',type);
      this.ip = ip;
      this.port = port;
      this.type = type;
      //alert(3)
      this.$router.go(0)
      //alert(4)
    },
    getCameraInfo: function(){
      if(localStorage.getItem('IP') != null) {
        //alert(1)
        this.ip = localStorage.getItem('IP');
        this.port = localStorage.getItem('PORT')
        this.type = localStorage.getItem('TYPE')
      }
      else{
        localStorage.setItem('IP',"192.168.69.135");
        localStorage.setItem('PORT',"8081");
        localStorage.setItem('TYPE',"null");
        this.ip = "192.168.69.135";
        this.port = "8081";
        this.type = "null";
        //alert(2)
      }
    }
  }

}
</script>

<style scoped>
.shopKind {
  font-size: 13px;
  color: #999;
  overflow: hidden;
}

.shopCard:hover {
  cursor: pointer;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.3);
}

.bottom {
  margin-top: 10px;
  line-height: 13px;
}

</style>
